<template>
    <div class="hdContainer">
        <h1 class="hdTitle">待办事项</h1>
        <input autofocus class="newTodo" placeholder="请输入待办事项" v-model="newTodo" @keyup.enter="addNewTodo">
        <p class="hdMsg" v-show="isShowMsg">最多输入{{ countLimit }} 个字符</p>
    </div>
</template>

<script>
const WORD_COUNT_LIMIT = 50;
export default {
    props: ['addTodo'],
    data: function () {
        return {
            newTodo: '',
            countLimit: WORD_COUNT_LIMIT,
        }
    },

    computed: {
        /**
         * 判断是否显示提示信息
         * @return {Boolean}

         */
        isShowMsg(){
            // 创建新的变量 用来存储 你新输入的字符长度 如果字符长度 大于 你设定的长度 就显示提示信息
            const newTodoCount = this.newTodo.length || '';

            return newTodoCount > WORD_COUNT_LIMIT;
        }
    },

    methods: {
        /**
         * 添加新任务
         * @return {void}

         */
        addNewTodo(){
            // 获取输入的值
            const newTodo = this.newTodo.trim();

            // 判断输入的值是否为空
            if(!newTodo){
                return;
            }

            // 添加新任务 并通过 $emit 传递给父组件 $emit 是父子组件的通信关键字
            this.$emit('addTodo', newTodo);
        }
    }
}
</script>

<style scoped>
.hdContainer{
    text-align: center;
    font-size: 16px;
}

.hdTitle{
    color: #4e6ef2;
}

.newTodo{
    width: 100%;
    padding: 20px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    box-sizing: border-box;
}

.newTodo:focus{
    outline-color: #4e6ef2;
}

.hdMsg{
    color: red;
    margin: 10px 0;

}
</style>